//3.引入两个子组件
import Tow from '../components/tow'
import One from '../components/One'
// 4.5 导入封装过的utils的 上下文
import globaleContext from '../utils/globaleContext';
// 4.1.1
import { useState } from 'react'
//4.1 消费者与服务商模式
// 创建上下文对象


// 1. 定义父组件
function Home() {
    // 4.3  创建 
    let [name, setName] = useState('张三');
    let [age, setAge] = useState(18);
    return (
        <div>
            <h2>useContext hooks 使用</h2>
            {/* 引入后 在这挂载使用 */}

            {/* 4.2 供应商组件  包裹子组件 （在信号内） */}
            <globaleContext.Provider value={{
                //4.4 是个对象 大括号包裹 存多个对象  name,age 传给子组件
                name,
                age,
                setage: (newAge) => {
                    setAge(newAge)
                }
            }}>
                <One></One>
                <Tow></Tow>
            </globaleContext.Provider>

        </div>
    )
}
// 2. 暴露导出
export default Home



/* 
总结：
        1. 创建上下文对象 不同组件用同一个上下文对象 把上下文对象 封装到一个文件里 
        2. 用该上下文对象提供的服务商方法（Provider） 服务商组件可以共享给子组件数据 只要哪些子组件需要拿到数据 把它包起来
        3.  获取子组件：在子组件里使用context来获取上下文对象传过来的数据
        4. 使用 调用 改变
*/